<template>
  <div class="Index">
    <p>{{msg}}</p>
    <!-- <div class='content'>
      <div class='con_let'>
        <div>{{data.buildsNumber?data.buildsNumber:0}}
          <div class='describe'>
            <i class='wy_icon wy_commdetail_building'></i>
            <p>楼宇</p>
          </div>
        </div>
        <div>{{data.housesNumber?data.housesNumber:0}}
          <div class='describe'>
            <i class='wy_icon wy_commdetail_house'></i>
            <p>房屋</p>
          </div>
        </div>
        <div>{{data.residentsNumber?data.residentsNumber:0}}
          <div class='describe'>
            <i class='wy_icon wy_commdetail_hous_user'></i>
            <p>住户</p>
          </div>
        </div>
        <div>{{data.carParkNumber?data.carParkNumber:0}}
          <div class='describe'>
            <i class='wy_icon wy_commdetail_Pspace'></i>
            <p>车位</p>
          </div>
        </div>
        <div>{{data.carNumber?data.carNumber:0}}
          <div class='describe'>
            <i class='wy_icon wy_commdetail_cars'></i>
            <p>车辆</p>
          </div>
        </div>
        <div>{{data.employeeNumber?data.employeeNumber:0}}
          <div class='describe'>
            <i class='wy_icon wy_commdetail_employees'></i>
            <p>员工</p>
          </div>
        </div>
      </div>
      <div class='con_rit'>
        <h2>商城</h2>
      </div>
    </div>
    <div class='content_chart'>
      <div class='status'>
        <div>物业费统计</div>
        <div>物业费统计</div>
        <div>物业费统计</div>
      </div>
      <div class='chart'>
        <div class='c1'></div>
        <div class='c2'></div>
        <div class='c3'></div>
      </div>
    </div> -->
  </div>
</template>

<script>
// import {getVillageDetail} from './../apis/api_system.js';

export default {
  name: 'index',
  data () {
    return {
      msg:"远方的朋友啊啊",
      data:{},
      loading:true
    }
  },
  mounted(){
    // this.getVillageDetail();
  },
  methods: {
    // getVillageDetail(areaid) {
    //   getVillageDetail(areaid).then((result) => {
    //     if (result.code == 0) {
    //       this.data = result.data;
    //     }
    //   });
    // }
  },
}
</script>

<style lang="scss" scoped>
@import "./../assets/color.scss";
@import "./../assets/mixin.scss";
@import "./../assets/size.scss";

.Index{
  .content{
    overflow: hidden;
    height: 100%;
    overflow: hidden;
    .con_let{
      float: left;
      width:72%;
      >div{
        width:calc(100% / 3 - 40px);
        height:206px;
        background: #fff;
        display: inline-block;
        margin:0 40px 40px 0;
        font-size: 60px;
        font-weight: bold;
        text-align: center;
        line-height: 206px;
        position:relative;
        .describe{
          position:absolute;
          left:4px;
          bottom:4px;
          line-height: 24px;
          font-size:$s16;
        }
      }
    }
    .con_rit{
      float:right;
      width:28%;
      min-height: 450px;
      height:100%;
      background:url("./../../public/static/images/mall.png") $d55d center no-repeat;
      background-size: 136px;
      background-position-y:136px;
      text-align: center;
      h2{
        font-size: $s36;
        color:#fff;
        margin-top: 300px;
      }
    }
  }
  .content_chart{
      border-top: 1px solid $co7a;
      width: 100%;
      clear: both;
      .status{
        font-size: $s20;
        height: 50px;
        line-height: 50px;
        >div{
          width: 160px;
          height: 100%;
          text-align: left;
          position: relative;
          float: left;
          padding-left: 20px;
        }
        @mixin contn{
          content:"";
          display: block;
          width: 20px;
          height: 20px;
          position: absolute;
          right: 4px;
          top: 16px;
        }
        div:nth-child(1){
          &::after{
            @include contn;
            background: #c71b29;
          }
        }
        
        div:nth-child(2){
           &::after{
            @include contn;
            background: #00ccff;
          }
        }
        div:nth-child(3){
          &::after{
            @include contn;
            background: #1bc737;
          }
        }
      }
    }
}
</style>
